<template>
  <el-dialog
    title="项目单位"
    align='left'
    :visible.sync="popDialogUnit"
    width="400px"
    style="overflow:hidden"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div class="project">
      <div class="project-left">
        <el-table
          ref="treeLoadTable"
          :data="tableParams.tableData"
          row-key="id"
          border
          lazy
          :load="load"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <template v-for="(item,index) in tableParams.tableHeader">
            <el-table-column show-overflow-tooltip :fixed="item.fixed" :align="item.align" :key="index" :prop="item.prop" :label="item.label" :width="item.width" :sortable="item.isSortable">
            </el-table-column>
          </template>
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
            <el-button @click="closePop">取 消</el-button>
            <el-button type="primary" @click="ensureHandle">确 定</el-button>
        </span>
  </el-dialog>
</template>
<script>
import TreeTable from '@/components/treeTableTemplate'
export default {
  components:{
    TreeTable,
  },
  props:{
    popDialogUnit:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return{
      // dialogVisible:false,
      tableParams:{
        //接口方法
        // apiName:'',//"queryApi"
        // 表头数据
        tableHeader:[
          // {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:'',isShow:true},
          {prop: 'name', label: '组织', align: 'left',type:"input",fixed:'',isShow:false},
          // {prop: 'date',label: '日期', align: 'center',type:"dictionary",fixed:'',isShow:true},
          // propString 最后要转换为文字的字段 formatterArrayString:"LEVEL",
          //filterProp:自定义数据字典  filterProp:[{"level":1,"levelString":"一级"},{"level":2,"levelString":"二级"},{"level":3,"levelString":"三级"}]
          //formatterArrayString:接口返回数据字典数据名 例如:"LEVEL" "IS_MARRY"
          // {prop: 'address', label: '地址', align: 'center',type:"",fixed:'',isShow:true,isSortable:true}
        ],
        //表格数据
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          hasChildren:true
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          hasChildren:true
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren:true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
      }
    }
  },
  mounted(){
    // this.initTable()
  },
  methods:{
    // initTable() {
    //   // debugger;
    //   // this.$refs['tableStand'].query({})
    // },
    load(tree, treeNode, resolve) {
      console.log(1111);
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            hasChildren:true
          }, {
            id: 32,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            hasChildren:true
          }
        ])
      }, 1000)
    },
    ensureHandle(){

    },
    closePop(){
      this.$emit("closePop","popDialogUnit");
    },
    beforeClose(){
      this.$emit("closePop","popDialogUnit");
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/styles/mixin";/*引入配置*/
.project-right >>> .el-table th {
  @include bg_color($background-color-theme1);
  height:30px;
  padding:0px;
}
.meeting{
  margin-top:0px !important;
}
.project{
  height:400px;
}
.el-dialog{
  overflow:hidden;
}
.project-left{
  width:350px;
  height:400px;
  float:left;
  overflow:auto;
}
.project-right{
  margin-left:30px;
  width:500px;
  height:400px;
  float:left;
}
.dialog-footer{
  width:100%;
}
.project-right-top{
  width:100%;
  height:400px;
  overflow:auto;
}
.project-right-bottom{
  margin-top:10px;
  width:100%;
  height:140px;
  overflow:auto;
}
.project-left >>> .el-table .el-table__header th{
  height:40px;
  padding:0px;
}
>>> .el-dialog__body{
  padding-top:10px;
  padding-bottom:10px;
}
</style>
